<template>
  <div>
    <div class="xls">
      <span>导入</span>
      <input
        type="file"
        accept=".xls,.xlsx"
        class="upload-file"
        ref="uploadImgBtn"
        @input="onImportEx"
      />
    </div>
    <el-button @click="exportss" class="export">导出</el-button>
    <el-button @click="add" class="add">新增</el-button>
    <avue-crud
      ref="crud"
      :data="carList"
      :option="option"
      @search-change="change"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @row-del="rowDel"
      v-model:page="page"
      @on-load="onLoad"
    >
      <template #state="scope">
        <div style="display: flex; align-items: center">
          <el-switch
            v-model="scope.row.state"
            class="ml-2"
            style="--el-switch-on-color: #19b8cb; --el-switch-off-color: #ccc"
          />
        </div>
      </template>
    </avue-crud>
    <AddDialog
      @closeTan="close"
      @confirm="addData"
      :dialogVisible="dialogVisible"
    />
  </div>
</template>
<script setup>
import { useSlots } from "vue";
import { getTick } from "../../hooks/get.js";
import { ref, onMounted } from "vue";
import axios from "axios";
import { defaultAxios } from "@/utils/request";
import AddDialog from "@/components/AddDialog.vue";
import { ElMessage } from "element-plus";
import { useStore } from "@/store/index";
import { storeToRefs } from "pinia";
const ExportJsonExcel = require("js-export-excel");
let store = useStore();
let { carList, total, page } = storeToRefs(store);
let option1 = ref({});
let tableData = ref([]);
let dialogVisible = ref(false);

let text = ref(false);
let option = ref({
  selection: true,
  align: "center",
  menuAlign: "center",
  addBtn: false,
  searchBtn: true,
  searchMenuSpan: 3,
  emptyBtn: false,
  index: true,
  indexLabel: "ID",
  column: [
    {
      label: "车站",
      prop: "city",
      search: true,
    },
    {
      label: "状态",
      prop: "state",

      width: "150px",
      slot: true,
      search: false,
      dicData: [
        {
          label: "停用",
          value: false,
        },
        {
          label: "启用",
          value: true,
        },
      ],
    },
  ],
});
onMounted(() => {
  store.changeList();
});
console.log(store);
console.log(carList);
option1.value.fileName = "表格";
function rowSave(row, done, loading) {
  console.log(index);
  done(row);
}
function rowDel(row, index, done) {
  console.log(index);
  done(row);
}
function rowUpdate(row, index, done, loading) {
  done(row);
}
const onLoad = (page) => {
  store.pageChange(page);
};
const change = (obj) => {
  store.changeData(obj);
};
option1.value.datas = [
  {
    sheetData: carList,
    sheetName: "sheet",
    sheetFilter: ["id", "city", "$state"],
    sheetHeader: ["id", "车站", "状态"],
    columnWidths: [10, 20],
  },
];
//导出
let toExcel = new ExportJsonExcel(option1.value);
const exportss = () => {
  toExcel.saveExcel();
};
//导入
const onImportEx = (file) => {
  const { files } = file.target;
  const fileReader = new FileReader(); // 创建FileReader 对象 读取文件
  fileReader.onload = (event) => {
    try {
      const { result } = event.target;
      // 二进制读取 excel表格对象
      const workList = XLSX.read(result, { type: "binary" });
      // 存储数据
      let data = [];
      for (let sheet in workList.Sheets) {
        if (workList.Sheets.hasOwnProperty(sheet)) {
          // 利用 sheet_to_json 方法将 excel 转成 json 数据
          data = data.concat(XLSX.utils.sheet_to_json(workList.Sheets[sheet]));
          console.log(data);
          // break; // 如果只取第一张表，就取消注释这行
        }
      }
      // 最终获取到并且格式化后的 json 数据
      const tableData = data.map((item) => {
        return {
          id: Number(item["id"]),
          city: item["车站"],
          state: item["状态"],
        };
      });
      store.addTab(tableData);
      page.value.pageSize = 10;
    } catch (error) {
      console.log("上传失败,err:", error);
    }
  };

  fileReader.readAsBinaryString(files[0]);
};
const close = (val) => {
  dialogVisible.value = val;
  ElMessage.error("新增车站失败");
};
const addData = (val) => {
  store.addCarList(val);
  dialogVisible.value = false;
};
const add = () => {
  dialogVisible.value = true;
};
</script>

<style>
.import {
  position: fixed;
  top: 10%;
  right: 20%;
  z-index: 10;
}
.add {
  position: fixed;
  top: 13%;
  left: 15%;
  z-index: 10;
}
.export {
  position: fixed;
  top: 10%;
  right: 15%;
  z-index: 10;
}
.xls {
  position: fixed;
  top: 10%;
  right: 20%;
  z-index: 10;
  width: 60px;
  height: 32px;
  margin-right: 10px;
  background: rgba(126, 156, 255);
  border-radius: 5px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.xls > input {
  position: absolute;
  width: 80px;
  height: 52px;
  opacity: 0;
  cursor: pointer;
  z-index: 99;
}
</style>
